<template>
    <div>
        <mt-tabbar v-model="selected" fixed>
        <mt-tab-item id="homeId">
          <!-- <router-link  tag="div" to="/"> -->
           <div class="mint-tab-item-icon">
             <span class="iconfont i-f-size">&#xe600;</span>
           </div>
            首页
          <!-- </router-link> -->
        </mt-tab-item>
        <mt-tab-item id="orderId">
          <!-- <router-link  tag="div" to="/order"> -->
            <div class="mint-tab-item-icon">
             <span class="iconfont i-f-size">&#xe6bd;</span>
           </div>
            订单
          <!-- </router-link> -->
        </mt-tab-item>
        <mt-tab-item id="discoverId">
          <!-- <router-link  tag="div" to="/discover">  -->
            <div class="mint-tab-item-icon">
             <span class="iconfont i-f-size">&#xe627;</span>
           </div>
            发现
          <!-- </router-link> -->
        </mt-tab-item>
        <mt-tab-item id="myId">
          <!-- <router-link  tag="div"  to="/my"> -->
            <div class="mint-tab-item-icon">
             <span class="iconfont i-f-size">&#xe607;</span>
           </div>
            我的
          <!-- </router-link> -->
        </mt-tab-item>
        </mt-tabbar>
      </div>
</template>

 <script>

export default {
  name: 'Footer',
  components: {
  },
  data () {
    return {
        selected:'',
    }
  },
  watch: {
     'selected':  {
       handler(){
         if (this.selected == "homeId") {  
            this.$router.push('/');
            this.selected = 'homeId'
          } 
          if (this.selected == "orderId") {  
            this.$router.push('/Order');
            this.selected = 'orderId'
          }
          if (this.selected == "discoverId") {  
            this.$router.push('/Discover');
            this.selected = 'discoverId'
          }
          if (this.selected == "myId") {  
             this.$router.push('/My');
             this.selected = 'myId'
          }
       }
    }
  },
  methods : {
    
  },
  mounted () {
      
  },
  computed: {
    
  }
}
</script>

<style>
.i-f-size{
  font-size:24px;
}
.router-link-exact-active{
  display: block;
}
</style>
